<!DOCTYPE html>
{% load staticfiles i18n %}

<html class="no-js">
<head>
  <title>Saleor</title>
  <meta charset="utf-8">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <style>
    body { margin: 0; padding: 0;}
    .read-only { font-family: 'Roboto', sans-serif; width: 100%; height: 100vh;
      background: linear-gradient(8deg, rgba(0,150,135,1) 0%, rgba(0,150,135,1) 30%, rgba(255,255,255,1) 30%, rgba(255,255,255,1) 100%); overflow: hidden; position: relative;}
    .read-only .read-only-description {width: 60%; position: absolute; top: 50%; transform: translateY(-50%); left: 0; text-align: center; }
    .read-only .read-only-description h2{text-transform: uppercase; font-size: 2rem;}
    .read-only .read-only-description h2 span {color: #ee6e73;}
    .read-only svg {position: absolute;}
    .read-only .img1 svg{width: 60%; right: -5rem; bottom: -5rem;}
    .read-only .img2 svg{width: 45%; right: 3rem; bottom: 2rem;}
    .read-only .img3 svg{width: 40%; right: 4rem; bottom: 0;}
    .read-only .img4 svg{width: 40%; right: 4rem; bottom: 0;}
    .read-only .img5 svg{width: 40%; right: 7rem; bottom: 5rem;}
    .read-only .btn {color: #fff; text-decoration: none; background: #2bbbad; border: none; border-radius: 2px; display: inline-block; height: 36px; line-height: 36px; padding: 0 2rem; text-transform: uppercase;}
    @media screen and (max-device-width: 1024px) {
      .read-only .read-only-description {width: 100%; top: 20%;}
      .read-only .btn {font-size: 2rem; padding: 1rem 2rem;}
      .read-only .img1 svg{width: 90%; right: 0; bottom: 0; padding: 0 5%;}
      .read-only .img2 svg{width: 70%; right: 0; bottom: 5rem; padding: 0 15%;}
      .read-only .img3 svg{width: 60%; right: 0; bottom: 0; padding: 0 20%;}
      .read-only .img4 svg{width: 70%; right: 0; bottom: 0; padding: 0 15%;}
      .read-only .img5 svg{width: 90%; right: 0; bottom: 15rem;  padding: 0 5%;}
    }
    @media screen and (max-device-width: 767px) {
      .read-only .read-only-description {width: 100%; top: 20%;}
      .read-only .read-only-description h2 {font-size: 3rem;}
      .read-only .btn {font-size: 3rem; padding: 1.5rem 3rem;}
      .read-only .img1 svg{width: 90%; right: 0; bottom: 0; padding: 0 5%;}
      .read-only .img2 svg{width: 80%; right: 0; bottom: 2rem; padding: 0 10%;}
      .read-only .img3 svg{width: 70%; right: 0; bottom: 0; padding: 0 15%;}
      .read-only .img4 svg{width: 70%; right: 0; bottom: 0; padding: 0 15%;}
      .read-only .img5 svg{width: 90%; right: 0; bottom: 15rem; padding: 0 5%;}
    }
  </style>
</head>

<body class="{% block body_class %}body-home{% endblock %}">
<div class="read-only">
  <div class="read-only-description">
    <h2>{% blocktrans %}Be aware pirate! <br> Saleor runs in <span>read only mode!</span>{% endblocktrans %}</h2>
    <a href="{{ back_url }}" class="btn">{% trans 'Close' %}</a>
  </div>
  <div class="{{ image_class }}">{% include image_path %}</div>
</div>
</body>
</html>
